<template>
	<view class="homeLayout pageBg">
		<z-paging ref="paging" v-model="LastTripData"  @query="queryList">
		
		<custom-nav-bar title="kjc"></custom-nav-bar>		
		<index-banner></index-banner>
<!-- 		<view class="head">
			<home-head></home-head>
		</view> -->
		<index-notice></index-notice>
		<view class="square">
			<common-title>
				<template #name>最近行程</template>
				<template #custom>
					<navigator url="" class="more">更多+</navigator>
				</template>
			</common-title>
				<view class="data">
					<view class="content">
						<view class="item" v-for="item in LastTripData"  :key="item._id">
							<travel-item :item="item"></travel-item>
						</view>					
					</view>
				</view>			
		</view>

		</z-paging>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const paging = ref(null);
const db = uniCloud.databaseForJQL()
const dbCmd = db.command

const LastTripData = ref([]);	// 最新发布的行程

const queryList = (pageNo, pageSize)=>{	
	getLastTripList(pageNo, pageSize);
}

const getLastTripList = async (pageNo, pageSize)=>{
	let now_ts = Date.now() 
	let skip = (pageNo - 1) * pageSize
	try{
		let {errCode,data} = await db.collection("trip-detail")
		.where(`start_time > ${Date.now()}`)
		.field("publish_date,last_modify_date,from_region,from_detail,to_region,to_detail,start_time,end_time,status,trip_type")
		.orderBy("start_time", "asc")
		.skip(skip)
		.limit(pageSize)
		.get();	
		if(errCode != 0) return;
		// 异步缓存数据
		// await cacheDataAsync(data);
		paging.value.complete(data);	// 触底刷新
	}catch(e){
		console.log("error:", e);
		paging.value.complete(false);
	}
}

// 异步缓存数据函数
const cacheDataAsync = async (data) => {
    data.forEach(record => {
        uni.setStorageSync(record._id, record);
		console.log('缓存数据:', record);
    });
    
}

</script>

<style lang="scss" scoped>
	.homeLayout {
		height: 100vh;
		// background: #BDE1FB;
		display: flex;
		flex-direction: column; // 垂直排列子元素

	.square{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;		// 网格布局
			gap: 30rpx;
			grid-template-columns: repeat(1, 1fr);
		}
	}
	}
</style>